Ext.define('BookmarkIt.view.headerPanel',{
	extend:'Ext.Panel',
	alias:'widget.headerPanel',
	autoshow:true,
	
	layout:'border',
	style:{
		visibility:'hidden'
	},
	
	items:[
	{
		region:'west',
		width:'20%',
		items:[{
			xtype:'panel',
			width:'100%',
			items:[{
				xtype:'button',
				id:'gapiLoadButton',
				style:{visibility:'visible','float':'left','margin-top':'10px'},
				text:'Load data from Google',
				handler:function(){
					Ext.Msg.wait('Loading...');
					BookmarkIt.store.gapiManager.loadDataToStore(Ext.getCmp('bookmarkView').getStore());
				}
			},
			{
				xtype:'button',
				id:'gapiSaveButton',
				style:{visibility:'visible','float':'left','margin-top':'10px'},
				text:'Save data to Google',
				handler:function(){					
					Ext.Msg.wait('Saving...');
					BookmarkIt.store.gapiManager.saveData(Ext.getCmp('bookmarkView').getStore());
				}
			}]
		}
		]
	},
	{
		region:'east',
		width:'30%',
		items:[{
				id : 'filterInput',
				xtype : 'trigger',
				baseCls : 'search-field',
				width : 200,
				style:{
					'visibility':'visible',
					'margin-top':'19px'
				},
				emptyText : 'Search',
				trigger1Cls : 'search-trigger',
				trigger2Cls : 'advanced-search-trigger',
				trigger3Cls : 'cancel-search-trigger',
				listeners : {
					specialkey : function(field, e) {
						if (e.getKey() === e.ENTER) {
							field.onTrigger1Click();
						}
					}
				},
				onTrigger1Click : function(field) {
					var me = this;
					var store = Ext.getStore('BookmarkIt.store.localBookmarks');
					if (this.getValue()) {
						window.controller.searchMode = true;
						store.clearFilter();
						store.filter({filterFn : function(rec) {return parseInt(rec.get("folderId"),10) === parseInt(window.controller.getCurrentFolderId(),10);}});												
						store.filter('title', new RegExp(me.value));
					}
				},
				onTrigger2Click : function(field) {
					var me = this;
					var store = Ext.getStore('BookmarkIt.store.localBookmarks');
					if (this.getValue()) {
						window.controller.searchMode = true;
						store.clearFilter();
						store.filter('title', new RegExp(me.value));
					}
				},
				onTrigger3Click : function(field) {
					var store = Ext.getStore('BookmarkIt.store.localBookmarks');
					if (this.getValue()) {
						window.controller.searchMode = false;
						store.clearFilter();
						store.filter({filterFn : function(rec) {return parseInt(rec.get("folderId"),10) === parseInt(window.controller.getCurrentFolderId(),10);}});
						this.setValue('');
					}
				}
			}]
	},
	{
		region:'center',
		padding:'10px 0 0 0',
		border:false,
        items:[
		      {
                  xtype:'panel',
                  width:'100%',
                  padding:10,
                  items:[			
                    {
                        xtype:'textfield',
                        id:'addUrlInput',
                        enableKeyEvents:true,
                        style:{visibility:'visible','float':'left','margin-left':'45%'},
                        listeners:{
                            afterrender:{
                                fn:function(){
                                    this.focus();
                                    var me = this;
                                    Ext.EventManager.on(window, 'focus', function() {
                                        me.focus();
                                    });
                                }
                            },
							specialkey : function(b, e) {
								if (e.getKey() === e.ENTER) {
									window.controller.onBookmarkAddClick(b,e);
								}
							}
                        }
                    },
					{
						xtype:'button',
						id:'addUrlButton',
						style:{visibility:'visible','float':'left','margin-left':'5px'},
						text:'New',
						handler:function(){
							window.controller.onBookmarkAddClick();
						}
					}
                   ]
		      }
		]
	}
	]
});